<div id="group-participant" class="panel__page group-participant" data-bind="with: $root.groupParticipant">
  <!-- ko if: isVisible() -->
    <div class="panel__header">
      <arrow-left-icon class="icon-button" data-bind="click: clickOnBack" data-uie-name="go-back-group-participant"></arrow-left-icon>
      <close-icon class="icon-button" data-bind="click: clickOnClose" data-uie-name="do-close"></close-icon>
    </div>
    <div class="panel__content">
      <div class="panel__content__scroll" data-bind="antiscroll: shouldUpdateScrollbar">
        <!-- ko ifnot: selectedParticipant().isBot -->
          <div class="conversation-details__header">
            <div class="conversation-details__name conversation-details__name--centered">
              <div class="conversation-details__flex-row">
                <!-- ko if: selectedParticipant().is_verified() -->
                  <verified-icon class="conversation-details__name__verified-icon" data-uie-name="status-verified-participant"></verified-icon>
                <!-- /ko -->
                <div class="conversation-details__name" data-bind="text: selectedParticipant().name()" data-uie-name="status-name"></div>
              </div>
            </div>
            <!-- ko if: selectedParticipant().username() -->
              <div class="conversation-details__user-name" data-bind="text: selectedParticipant().username()" data-uie-name="status-username"></div>
            <!-- /ko -->
            <div class="conversation-details__participants">
              <participant-avatar params="participant: selectedParticipant, size: z.components.ParticipantAvatar.SIZE.X_LARGE" data-uie-name="status-profile-picture"></participant-avatar>
              <!-- if: isTeam() -->
                <availability-state
                  class="conversation-details__availability"
                  data-uie-name="status-availability"
                  params="availability: selectedParticipant().availability(), label: availabilityLabel()">
                </availability-state>
              <!-- /ko -->
            </div>
          </div>

          <!-- ko if: showActionDevices() -->
            <div class="panel__action-item conversation-details__devices" data-bind="click: clickOnDevices" data-uie-name="go-devices">
              <devices-icon class="panel__action-item__icon"></devices-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.conversationDetailsActionDevices"></div>
              <disclose-icon></disclose-icon>
            </div>
          <!-- /ko -->

          <div class="group-participant__bottom-actions">
            <!-- ko if: showActionSelfProfile() -->
              <div class="panel__action-item" data-bind="click: clickOnShowProfile" data-uie-name="go-profile">
                <profile-icon class="panel__action-item__icon"></profile-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionSelfProfile"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionOpenConversation() -->
              <div class="panel__action-item" data-bind="click: clickOnOpenConversation" data-uie-name="go-conversation">
                <message-icon class="panel__action-item__icon"></message-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionOpenConversation"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionsIncomingRequest() -->
              <div class="panel__action-item" data-bind="click: clickToAcceptRequest" data-uie-name="do-accept-request">
                <check-icon class="panel__action-item__icon"></check-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionIncomingRequest"></div>
              </div>
              <div class="panel__action-item" data-bind="click: clickToIgnoreRequest" data-uie-name="do-ignore-request">
                <close-icon class="panel__action-item__icon"></close-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionIgnoreRequest"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionsOutgoingRequest() -->
              <div class="panel__action-item" data-bind="click: clickOnOpenConversation" data-uie-name="go-conversation">
                <message-icon class="panel__action-item__icon"></message-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionPending"></div>
              </div>
              <div class="panel__action-item" data-bind="click: clickToCancelRequest" data-uie-name="do-cancel-request">
                <undo-icon class="panel__action-item__icon"></undo-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionCancelRequest"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionSendRequest() -->
              <div class="panel__action-item" data-bind="click: clickToSendRequest" data-uie-name="do-send-request">
                <plus-icon class="panel__action-item__icon"></plus-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionSendRequest"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionBlock() -->
              <div class="panel__action-item" data-bind="click: clickToBlock" data-uie-name="do-block">
                <block-icon class="panel__action-item__icon"></block-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionBlock"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionUnblock() -->
              <div class="panel__action-item" data-bind="click: clickToUnblock" data-uie-name="do-unblock">
                <block-icon class="panel__action-item__icon"></block-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionUnblock"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionLeave() -->
              <div class="panel__action-item" data-bind="click: clickToLeave" data-uie-name="do-leave">
                <leave-icon class="panel__action-item__icon"></leave-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionLeave"></div>
              </div>
            <!-- /ko -->
            <!-- ko if: showActionRemove() -->
              <div class="panel__action-item" data-bind="click: clickToRemove" data-uie-name="do-remove">
                <minus-icon class="panel__action-item__icon"></minus-icon>
                <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionRemove"></div>
              </div>
            <!-- /ko -->
          </div>
        <!-- /ko -->

        <!-- ko if: selectedParticipant().isBot && selectedService() -->
          <div class="group-participant__service-header">
            <participant-avatar params="participant: selectedService, size: z.components.ParticipantAvatar.SIZE.LARGE"></participant-avatar>
            <div class="group-participant__service-details">
              <div class="group-participant__service-name" data-bind="text: selectedService().name" data-uie-name="status-service-name"></div>
              <div class="group-participant__service-provider" data-bind="text: selectedService().providerName()" data-uie-name="status-service-provider"></div>
            </div>
          </div>
          <div class="group-participant__service-description" data-bind="text: selectedService().description" data-uie-name="status-service-description"></div>
          <!-- ko if: showActionRemove() -->
            <div class="panel__action-item"  data-bind="click: clickToRemove" data-uie-name="do-remove">
              <minus-icon class="panel__action-item__icon"></minus-icon>
              <div class="panel__action-item__text" data-bind="l10n_text: z.string.groupParticipantActionRemove"></div>
            </div>
          <!-- /ko -->
        <!-- /ko -->
      </div>
    </div>
  <!-- /ko -->
</div>
